<template>
	<view class="login">

		<view class="img-wrap">
			<image class="top-img" src="/static/login-icon.png" mode="">
			</image>
		</view>

		<image @click="back" class="arrow-back"
			src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/back-arrow.png" mode=""></image>
		<view class="ducha" v-if="!isLogin">
			<text>>>></text><text>督查</text>

		</view>
		<view class="login-register-wrap" :style="backgroundStyle">
			<view class="login-register" :style="isLogin?'height:80rpx':'height:102rpx'">
				<view class="log"
					:style="!isLogin?'color: #999;line-height:110rpx;font-weight: 400;':'color: #0874FA;line-height:114rpx;font-weight:bold;'"
					@click="isLogin=true"> <text :class="isLogin?'addLine':''">登录</text>
				</view>
				<view class="register"
					:style="isLogin?'color: #999;line-height:114rpx;font-weight: 400;':'color: #0874FA;line-height:110rpx;font-weight:bold'"
					@click="register"><text :class="!isLogin?'addLine':''">注册</text> </view>
			</view>
			<template v-if="isLogin">
				<view class="ipt-wrap">
					<view class="user">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/user.png"
							mode="">
						</image>
						<input type="text" placeholder="手机号" v-model="loginEnter.mobile"
							placeholder-style="color: #999999;font-size: 27rpx;font-weight: 400;" />
					</view>
					<view class="psd">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/psd.png"
							mode="">
						</image>
						<input type="text" placeholder="验证码" v-model="loginEnter.code"
							placeholder-style="color: #999999;font-size: 27rpx;font-weight: 400;" />
						<button class="code" :disabled="!loginCodeFlag"
							@click="updateLoginLetter">{{loginCodeFlag?'获取验证码':loginNum+'秒后重试'}}</button>
					</view>
				</view>
				<view class="btn-wrap">
					<button @click="login">登录</button>
				</view>
			</template>
			<template v-if="!isLogin">
				<view class="login-wrap">
					<view class="enterprise">
						<text class="star">*</text>
						<text>企业名称</text>
						<input type="text" placeholder="扫码或手动填写内容" v-model="registerParams.username"
							placeholder-style="color: #ccc;font-size: 27rpx;font-weight: 400;" />
						<image @click="recognizeCode"
							src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/saoma.png"
							mode=""></image>
					</view>
					<view class="user-name">
						<text class="star">*</text>
						<text>排污许可证号</text>
						<input type="text" style="flex: 1;" placeholder="请输入排污许可证号" v-model="registerParams.creditcode"
							placeholder-style="color: #ccc;font-size: 27rpx;font-weight: 400;" />
					</view>
					<view class="phone">
						<text class="star">*</text>
						<text>手机号码</text>
						<input type="text" placeholder="手机号" v-model="registerParams.mobile"
							placeholder-style="color: #ccc;font-size: 27rpx;font-weight: 400;" />
						<button class="btn" :disabled="!registerCodeFlag"
							@click="updateRegisterLetter">{{registerCodeFlag?'获取验证码':registerNum+'秒后重试'}}</button>
					</view>
					<view class="code">
						<text class="star">*</text>
						<text>验证码</text>
						<input type="text" placeholder="验证码" v-model="registerParams.code"
							placeholder-style="color: #ccc;font-size: 27rpx;font-weight: 400;" />
					</view>

					<!-- 		<view class="radio-group">
						<view class="radio-one" @click="selRadio=1">
							<view class="circle-wrap">
								<view class="circle" v-if="selRadio==1"></view>
							</view>持证单位
						</view>
						<view class="radio-two" @click="selRadio=2">
							<view class="circle-wrap">
								<view class="circle" v-if="selRadio==2"></view>
							</view>服务单位
						</view>
						<view class="radio-two" @click="selRadio=3">
							<view class="circle-wrap">
								<view class="circle" v-if="selRadio==3"></view>
							</view>管理单位
						</view>



					</view> -->
					<button class="login-reg-btn" @click="registerAndLogin">注册并登录</button>
					<view class="message">
						<!-- 	<view class="">
							1.企业账号只需要在最初注册一次,企业多个设施直接登录即可
						</view>
						<view class="">
							2.企业在不同区分公司，若社会信用代码相同，请在信用代码后面-1
						</view> -->
						<radio-group style="display: flex;align-items: center;position: relative;"
							@change="radioChange">
							<label style="display: flex;align-items: center;">
								<checkbox :value="checkbox" :disabled="!agreement" />
								<view class="content">
									<view class="msg"><button @click="jumpServiceAgre">《用户服务协议》</button>
										<text @click="showTap">您知悉并同意服务提供者按照和</text>
									</view>
									<view class="msg"><button @click="jumpPrivacyPolicy">《隐私政策》</button>
										<text @click="showTap">实施个人信息处理并用于身份核验</text>
									</view>
									<view class="no-watch" @click="noWatch" v-if="!agreement">

									</view>
								</view>
							</label>

						</radio-group>

					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import http from '../../request/index.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		computed,
		watch,
		reactive
	} from 'vue'
	let registerParams = reactive({})
	let isLogin = ref(true)
	let flag = ref(false)
	let selRadio = ref(1)
	let loginEnter = reactive({
		mobile: '',
		code: '8607',
		// mobile: '18600010002', 处置
		// code: '1111'
		// mobile: '15537652177', 管理员
		// code: '8607'
		// mobile: '15537652172', 产废
		// code: '5128'
	})
	let agreement = ref(false)
	let checkbox = ref(false)
	onLoad(() => {
		loginEnter.mobile = uni.getStorageSync('mobile') || uni.getStorageSync('phoneone') || '15537652177'
	})
	onShow(() => {
		console.log('-=')
		let serviceagreement = uni.getStorageSync("serviceagreement") || 0
		let privacy = uni.getStorageSync("privacy") || 0

		agreement.value = serviceagreement == 1 && privacy == 1 ? true : false
	})
	let radioChange = (e) => {
		e.detail.value == 'false' ? flag.value = true : flag.value = false

	}
	let loginCodeFlag = ref(true)
	let registerCodeFlag = ref(true)
	let loginCodeLetter = ref('获取验证码')
	let loginNum = ref(60)
	let registerNum = ref(60)
	let showTap = () => {

		if (!agreement.value) {

			uni.showToast({
				title: "请阅读用户服务协议和隐私政策",
				icon: 'none'
			})
			return
		}


	}
	/*注册验证码 */
	let updateRegisterLetter = () => {

		if (!/^1\d{10}/.test(registerParams.mobile)) {

			uni.showToast({
				title: '手机格式不正确',
				icon: "none",
				mask: true
			})

			return
		}

		registerCodeFlag.value = false
		let timer = setInterval(() => {
			--registerNum.value
			if (registerNum.value <= 0) {
				registerCodeFlag.value = true
				registerCodeFlag.value = 60
				clearInterval(timer)
			}
		}, 1000)
		http({
			url: "/sms/sendsms",
			data: {
				type: 1,
				mobile: registerParams.mobile
			}

		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: "发送成功",
					icon: "none",
					mask: true
				})
			}

		})
	}

	let noWatch = () => {
		console.log('-=')
		if (!agreement.value) {
			uni.showToast({
				title: "请阅读用户服务协议和隐私政策",
				icon: 'none'
			})
			// uni.showToast({
			// 	title: '',
			// 	icon: 'error'
			// })
			return
		}
	}
	/* 登录验证码 */
	let updateLoginLetter = () => {
		// if (!agreement.value) {
		// 	uni.showToast({
		// 		title: '',
		// 		icon: 'error'
		// 	})
		// 	return
		// }

		if (!/^1\d{10}/.test(loginEnter.mobile)) {

			uni.showToast({
				title: '手机格式不正确',
				icon: "none",
				mask: true
			})

			return
		}
		loginCodeFlag.value = false
		let timer = setInterval(() => {
			--loginNum.value
			if (loginNum.value <= 0) {
				loginCodeFlag.value = true
				loginNum.value = 60
				clearInterval(timer)
			}
		}, 1000)
		http({
			url: '/sms/sendsms',
			data: {
				type: 3,
				mobile: loginEnter.mobile
			}
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: "发送成功",
					icon: "none",
					mask: true
				})
			}
		})
	}

	const register = () => {
		isLogin.value = false
	}
	/* 登录成功 */
	const login = () => {
		if (!/^1\d{10}/.test(loginEnter.mobile)) {
			uni.showToast({
				title: '手机号不正确',
				icon: "none",
				mask: true
			})
			return
		}
		if (!loginEnter.code) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'error'
			})
			return
		}
		if (loginEnter.code.length !== 4) {
			uni.showToast({
				title: '验证码不正确',
				icon: 'error'
			})
			return
		}
		http({
			url: "/login",
			data: loginEnter
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					icon: 'none',
					title: '登录成功',
					mask: true
				})
				uni.setStorageSync("TOKEN", res.data.token) || ''
				uni.setStorageSync("username", res.data.username) || ''
				uni.setStorageSync('customername', res.data.customername) || ''
				uni.setStorageSync('creditcode', res.data.dischargelicense) || ''
				uni.setStorageSync('phoneone', res.data.hbmobile) || ''
				let usertype = res.data.usertype //usertype=1:产废用户 2：经营单位 9：环保局用户

				if (usertype == 9) {
					uni.setStorageSync('admin', true)
					uni.setStorageSync('departmentname', res.data.departmentname) || ''
					uni.setStorageSync('mobile', res.data.hbmobile) || ''
				} else if (usertype == 2) {
					uni.setStorageSync('mobile', res.data.mobile) || ''
					uni.setStorageSync('username', res.data.username) || ''
					uni.setStorageSync('operationUnit', true)
					console.log('jinliale')
				} else {
					uni.setStorageSync('admin', false)
				}

				setTimeout(() => {

					if (res.data.isNeedEnterpriseInfo == 1) {

						uni.navigateTo({
							url: "/homePageOther/edit-enterprise-msg/edit-enterprise-msg"
						})
					} else {
						uni.switchTab({
							url: "/pages/home/home"
						})
					}

				}, 1500)
			}
		})
	}
	let recognizeCode = () => {
		uni.showLoading({
			title: '识别中...',
			mask: true
		});
		uni.scanCode({
			success: function(res) {
				http({
					url: '/registerScan/scanCreditCode',
					data: {
						qrcode: res.result
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						registerParams.creditcode = res.data.creditcode
						registerParams.username = res.data.enterprisename
					}

				})
			},
			fail() {
				uni.hideLoading()
			}
		});

	}
	/* 注册并登录 */
	let registerAndLogin = () => {
		if (!flag.value) {
			uni.showToast({
				title: '请同意用户服务协议和隐私政策',
				icon: 'none'
			})
			return
		}
		let keys = Object.keys(registerParams)
		if (keys.length != 4) {
			uni.showToast({
				title: '请完整填写内容',
				icon: 'error'
			})
			return
		}
		if (!/^1\d{10}/.test(registerParams.mobile)) {

			uni.showToast({
				title: '手机号不正确',
				icon: "none",

			})

			return
		}
		let type = selRadio.value == 1 || selRadio.value == 2 ? 1 : 2
		http({
			url: "/register",
			data: {
				...registerParams,
				type
			}

		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					icon: 'none',
					title: '登录成功',
					mask: true
				})
				uni.setStorageSync("TOKEN", res.data.token)
				uni.setStorageSync("username", res.data.username)
				uni.setStorageSync("customername", registerParams.username)
				uni.setStorageSync("creditcode", registerParams.creditcode)
				uni.setStorageSync("phoneone", registerParams.mobile)
				setTimeout(() => {
					if (res.data.isNeedEnterpriseInfo == 1) {
						uni.navigateTo({
							url: "/homePageOther/edit-enterprise-msg/edit-enterprise-msg"
						})
					} else {
						uni.switchTab({
							url: "/pages/home/home"
						})
					}

				}, 1500)
			}
		})
	}
	let back = () => {
		uni.navigateBack()
	}
	let backgroundStyle = computed(() => {
		let url = isLogin.value ?
			'https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/sel-right.png' :
			'https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/sel-left.png'
		let height = isLogin.value ? '992rpx' : '991rpx'
		return {
			backgroundImage: `url(${url})`,
			height: `${height}`,
			position: 'absolute',
			borderRadius: '35rpx',
			width: '704rpx',
			backgroundSize: '100% 100%',
			top: '461rpx',
			left: '50%',
			transform: 'translateX(-50%)'


		};
	})
	let jumpServiceAgre = () => {
		uni.navigateTo({
			url: "/registerPageOther/serviceagreement/serviceagreement"
		})
	}
	let jumpPrivacyPolicy = () => {
		uni.navigateTo({
			url: "/registerPageOther/privacypolicy/privacypolicy"
		})
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 100vh;
		background: url("https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/background.png") no-repeat;
		background-size: 100% 100%;
		padding-top: 135rpx;

		position: relative;
		box-sizing: border-box !important;
		overflow: hidden;

		.arrow-back {
			width: 23rpx;
			height: 38rpx;
			position: absolute;
			left: 36rpx;
			top: 86rpx;
		}

		.img-wrap {
			display: flex;
			justify-content: center;

		}

		.ducha {
			position: absolute;
			font-weight: 400;
			font-size: 38rpx;
			color: #FFFFFF;
			top: 70rpx;
			right: 52rpx;
		}

		.top-img {
			height: 82rpx;
			width: 482rpx;
		}

		.login-register-wrap {
			position: absolute;
			top: 528rpx !important;

			.login-register {
				display: flex;
				justify-content: space-between;


				align-items: center;

				.log,
				.register {
					.addLine {
						position: relative;

						&:before {
							position: absolute;
							left: 50%;
							transform: translate(-50%);
							bottom: -10rpx;
							display: block;
							content: '';
							width: 42rpx;
							height: 6rpx;
							background: #0874FA;
							border-radius: 3rpx;
						}
					}
				}

				.log,
				.register {
					font-weight: 400;
					font-size: 35rpx;
					color: #333333;
					flex: 1;
					text-align: center;
					height: 92rpx;

				}

			}

			.login-wrap {
				padding: 0 39rpx;
				margin-top: 40rpx;

				.enterprise {
					display: flex;
					align-items: center;

					input {
						margin-left: 63rpx;
						flex: 1;
						font-weight: 400;
						font-size: 27rpx;
						color: #666666;
					}

					image {
						width: 41rpx;
						height: 41rpx;
						flex-shrink: 0;
					}
				}

				.user-name {
					input {
						margin-left: 88rpx;

						font-weight: 400;
						font-size: 27rpx;
						color: #666666;
					}
				}

				.phone {


					input {
						margin-left: 60rpx;

						font-weight: 400;
						font-size: 27rpx;
						color: #666666;
					}

					.btn {
						width: 175rpx;
						height: 65rpx;
						background: #ccc;
						border-radius: 7rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333;
						padding: 0;
						margin: 0;
						border-radius: 33rpx;
						flex-shrink: 0;
						line-height: 65rpx;

					}
				}

				.code {
					input {
						margin-left: 91rpx;

						font-weight: 400;
						font-size: 27rpx;
						color: #666666;
					}
				}

				.enterprise,
				.user-name,
				.phone,
				.code {
					padding-left: 3rpx;

					border-bottom: 2rpx solid #f3f3f3;
					display: flex;
					align-items: center;
					height: 98rpx;
					line-height: 98rpx;

					text {
						flex-shrink: 0;


						font-weight: 500;
						font-size: 27rpx;
						color: #333;
					}

					.star {
						color: red;
						margin-right: 4rpx;
					}



				}




				.radio-group {
					margin-top: 84rpx;
					display: flex;
					justify-content: space-around;

					.radio-one,
					.radio-two {
						display: flex;
						align-items: center;
						justify-content: space-around;

						font-weight: 400;
						font-size: 24rpx;
						color: #333333;

						.circle-wrap {
							position: relative;
							width: 36rpx;
							height: 36rpx;
							background: #FFFFFF;
							border-radius: 50%;
							border: 1px solid #0874FA;
							margin-right: 14rpx;

							.circle {
								position: absolute;
								width: 21rpx;
								height: 21rpx;
								background: #0874FA;
								border-radius: 50%;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}

				}

				.login-reg-btn {
					margin-top: 55rpx;
					width: 100%;
					height: 76rpx;
					background: #0874FA;
					border-radius: 38rpx;
					font-weight: 400;
					font-size: 35rpx;
					color: #FFFFFF;
					line-height: 76rpx;
				}

				.message {
					display: flex;
					align-items: center;
					margin-top: 55rpx;
					width: 639rpx;

					font-weight: 400;
					font-size: 22rpx;
					color: #999999;


					.content {
						display: flex;
						flex-direction: column;
						position: relative;

						.no-watch {
							width: 55rpx;
							height: 50rpx;

							position: absolute;
							left: -60rpx;
							top: 16rpx;
						}

						.msg {

							display: flex;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							justify-content: center;
							align-items: center;

							button {
								font-weight: 400;
								font-size: 24rpx;
								color: #0874FA;
								height: 40rpx;
								line-height: 40rpx;

							}
						}
					}

				}
			}

			.ipt-wrap {
				padding: 0 39rpx;

				.user,
				.psd {
					width: 100%;
					height: 83rpx;
					background: #F3F3F3;
					border-radius: 42rpx;
					display: flex;
					align-items: center;
				}

				.user {
					margin-top: 100rpx;

					image {
						width: 32rpx;
						height: 40rpx;
						margin-left: 35rpx;
						margin-right: 28rpx;
					}
				}

				.psd {
					margin-top: 28rpx;

					image {
						width: 30rpx;
						height: 34rpx;
						margin-left: 38rpx;
						margin-right: 29rpx;
					}

					.code {
						margin-right: 11rpx;
						width: 175rpx;
						height: 65rpx;
						background: #ccc;
						border-radius: 33rpx;


						padding: 0;
						font-weight: 400;
						font-size: 24rpx;
						color: #333;
						line-height: 65rpx;

					}
				}
			}

			.btn-wrap {
				padding: 0 39rpx;
				margin-top: 148rpx;

				button {
					width: 100%;

					height: 76rpx;
					background: #0874FA;
					border-radius: 38rpx;


					font-weight: 400;
					font-size: 35rpx;
					color: #FFFFFF;
					line-height: 76rpx;
				}
			}
		}


	}
</style>